<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 第一：定义一个外层函数，并在封装相关的变量。
        // 第四：使用一个变量接收，便于再次调用
        var counter = function() {
            // 定义相关的变量（函数外不能访问）
            var i = 0 ;

            // 第二：定义内层函数，并对外层函数的变量进行访问，
            // 根据不同的需要进行相应的处理
    
            // 第三：在外层函数内返回内层函数，并自调用外层函数
            return function() {
                // 根据需求，对外部函数的变量进行相关的操作
                i = i + 1 ;
                console.log("i =",i);
            } ;
        }();    


        // 注意：直接访问函数内的变量 - 错误
        // console.log(i);
        
        // 通过闭包（内奸）访问函数内的变量 - 正确
        counter() ;
        counter() ;
        counter() ;


        
        

                


    </script>







</body>
</html>